<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" @close="onClose" :close-on-click-modal="false" width="1200px">
			<el-tabs v-model="state.dialog.type" type="border-card">
				<el-tab-pane name="en" label="英文" />
				<el-tab-pane name="lo" label="老挝语" />
			</el-tabs>
			<el-form ref="formRef" :model="state.translationForm">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-divider content-position="left">翻译内容</el-divider>
					</el-col>
					<el-col :span="12">
						<el-divider content-position="left">{{ state.dialog.type === 'en' ? '英文翻译' : '老挝翻译' }}</el-divider>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="公告标题">
							<el-input v-model="state.translationForm.title.zh" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="公告标题">
							<el-input
								v-model="state.translationForm.title[state.dialog.type]"
								:class="{ w83: state.originalForm.title[state.dialog.type] !== state.translationForm.title[state.dialog.type] }"
								placeholder="请输入公告标题"
							/>
							<!-- 接口不支持修改 -->
							<!-- <el-button
								v-if="state.originalForm.title[state.dialog.type] !== state.translationForm.title[state.dialog.type]"
								type="primary"
								@click="onTranslateEdit(state.translationForm.title)"
							>
								修改
							</el-button> -->
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="通知内容">
							<div style="border: 1px solid #ccc; margin-right: 5px">
								<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
								<Editor
									style="height: 500px; overflow-y: hidden"
									v-model="state.translationForm.content.zh"
									:defaultConfig="editorConfig"
									:mode="mode"
									disabled
									@onCreated="handleCreated"
								/>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="通知内容">
							<div style="display: flex">
								<div style="border: 1px solid #ccc; margin-right: 5px">
									<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef1" :defaultConfig="toolbarConfig1" :mode="mode1" />
									<Editor
										style="height: 500px; overflow-y: hidden"
										v-model="state.translationForm.content[state.dialog.type]"
										:defaultConfig="editorConfig1"
										:mode="mode1"
										@onCreated="handleCreated1"
									/>
								</div>
								<el-button
									v-if="state.originalForm.content[state.dialog.type] !== state.translationForm.content[state.dialog.type]"
									type="primary"
									@click="onEdit(state.translationForm.content)"
								>
									修改
								</el-button>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { reactive, shallowRef, onBeforeUnmount, inject } from 'vue';

import { announcementApi } from '/@/api';
import { randomString } from '/@/utils/utils';
import upload from '/@/utils/uploadCos';

const Dayjs: any = inject('dayjs');
const AnnouncementApi = announcementApi();

// 编辑器实例
const editorRef = shallowRef();
// 内容 HTML
const toolbarConfig: any = {};
const mode = 'default';
const handleCreated = (editor: any) => {
	editorRef.value = editor; // 记录 editor 实例
};
const editorConfig: any = {
	placeholder: '请输入内容...',
	MENU_CONF: {},
};

// 编辑器实例-翻译
const editorRef1 = shallowRef();
// 内容 HTML
const toolbarConfig1: any = {};
const mode1 = 'default';
const handleCreated1 = (editor: any) => {
	editorRef1.value = editor; // 记录 editor 实例
};
const editorConfig1: any = {
	placeholder: '请输入内容...',
	MENU_CONF: {},
};
toolbarConfig.excludeKeys = toolbarConfig1.excludeKeys = ['insertVideo', 'uploadVideo', 'editVideoSize'];
editorConfig.MENU_CONF['uploadImage'] = editorConfig1.MENU_CONF['uploadImage'] = {
	server: '/api/upload',
	onBeforeUpload(file: File) {
		return file;
	},
	// 自定义上传
	async customUpload(file: File, insertFn: any) {
		let fileExtension = file.name.substring(file.name.lastIndexOf('.') + 1);
		let path = `/seamall/announcement/${Dayjs().year()}/${Dayjs().month()}/${Dayjs().date()}/${randomString(32).toLowerCase()}.${fileExtension}`;
		console.log(file);
		console.log(path);
		upload(file, path)
			.then((res1: any) => {
				console.log('上传成功', res1);
				if (res1.err) {
					ElMessage.error(res1.err.message);
					return;
				}
				insertFn(res1.url, res1.url, res1.url);
			})
			.catch(() => {});
	},
};

let callback: Function = () => {};
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: 'en',
		title: '翻译管理',
		submitLoading: false,
	},
	originalForm: {
		title: {},
		content: '',
	} as any,
	translationForm: {
		title: {},
		content: '',
	} as any,
});

/********** 触发事件 **********/
/********** 方法事件 **********/
// 打开
const openDialog = (row: any, fn: Function) => {
	callback = fn;
	state.dialog.isShowDialog = true;
	state.dialog.type = 'en';
	state.originalForm = state.translationForm = {
		title: {},
		content: '',
	};
	const trans = row.lang_system;
	if (!Object.keys(trans).length) return;
	state.originalForm = JSON.parse(
		JSON.stringify({
			...row,
			title: row.lang_system,
			content: {
				zh: row.content,
				en: row.content_en,
				lo: row.content_lo,
			},
		})
	);
	state.translationForm = {
		title: row.lang_system,
		content: {
			zh: row.content,
			en: row.content_en,
			lo: row.content_lo,
		},
	};
};
// 关闭
const onClose = () => {
	state.dialog = {
		isShowDialog: false,
		type: 'en',
		title: '翻译管理',
		submitLoading: false,
	};
};
const onEdit = (params: any) => {
	if (!params[state.dialog.type]) return ElMessage.warning('请修改内容不能为空');
	let _params: any = {
		...state.originalForm,
		title: state.originalForm.title.zh,
		content: state.originalForm.content.zh,
		announcement_id: state.originalForm.id,
	};
	_params['content_' + state.dialog.type] = state.translationForm.content[state.dialog.type];
	_systemAnnouncementEdit(_params);
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
	const editor = editorRef.value;
	const editor1 = editorRef1.value;
	if (editor != null) editor.destroy();
	if (editor1 != null) editor1.destroy();
});

/********** 网络请求 **********/
// 编辑
const _systemAnnouncementEdit = (params: Object) => {
	AnnouncementApi.systemAnnouncementEdit(params)
		.then(() => {
			ElMessage.success('操作成功！');
			onClose();
			callback();
		})
		.catch(() => (state.dialog.submitLoading = false));
};
/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
